<template>
  <page-header-wrapper>
    <page-tab-list>
      <a-alert message="此配置用于联盟店铺信息展示" type="info" show-icon style="margin:24px 0" />
      <template>
        <div v-loading="loading">
          <a-form-model
            ref="coordinateForm"
            :rules="rules"
            :model="info"
            :labelCol="{ span: 3 }"
            :wrapperCol="{ span: 16 }"
          >
            <a-form-model-item label="商城名称" prop="name">
              <a-input v-model="info.name" />
            </a-form-model-item>
            <a-form-model-item label="商城Logo" prop="logo">
              <cyyUploadImg
                @uploadSuccess="
                  (e) => {
                    info.logo = e.data
                  }
                "
                @deleteImg="info.logo = ''"
                :imgSrc="info.logo"
                imgSizeText="100*100"
              >
              </cyyUploadImg>
            </a-form-model-item>
            <a-form-model-item label="商城坐标" prop="coordinate" help="用逗号分割, 例子:34.819159,113.630390">
              <a-input v-model="info.coordinate" @blur="autoSortCoordinate" style="width: 200px; margin-right: 10px" />
              <a-button type="primary" @click="onClickSelectMap"> 选择 </a-button>
            </a-form-model-item>
            <a-form-model-item label="商城地区">
              <Address v-model="info.address_info"></Address>
            </a-form-model-item>
            <a-form-model-item label="商城地址" prop="address">
              <a-input v-model="info.address" />
            </a-form-model-item>
            <a-form-model-item label="联系人" prop="user_name">
              <a-input v-model="info.user_name" />
            </a-form-model-item>
            <a-form-model-item label="联系方式" prop="contact_tel">
              <a-input v-model="info.contact_tel" />
            </a-form-model-item>
            <a-form-model-item label="商城虚拟销量" prop="sales">
              <a-input-number v-model="info.sales" :precision="0" :min="0" :max="999999" />
            </a-form-model-item>
            <a-form-model-item label="商城评分" prop="rank">
              <a-input-number
                :disabled="!isSuperAdmin"
                :precision="1"
                v-model="info.rank"
                step="0.1"
                :min="0"
                :max="5"
              />
            </a-form-model-item>
            <a-form-model-item label="商城人均消费" prop="per_spend">
              <a-input-number v-model="info.per_spend" step="0.01" :precision="2" :min="0" :max="999999" />
            </a-form-model-item>
            <a-form-model-item label="商城标签" help="用于展示，每个标签最好不超过5个字">
              <a-select v-model="info.tags" mode="tags">
                <a-select-option v-for="(item, index) of info.tags" :key="index" :value="item">
                  {{ item }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="当前类目">
              {{ info.category_name }}
            </a-form-model-item>
            <a-form-model-item label="当前类目选项" v-if="info.option && info.option.length > 0">
              <div v-for="(item, index) of info.option" :key="index">
                <a-tag color="blue" style="margin-right: 0">{{ item.name }}</a-tag
                ><a-divider type="vertical" /><a-tag color="green" v-for="(it, i) of item.list" :key="i">{{
                  it
                }}</a-tag>
              </div>
            </a-form-model-item>
            <a-form-model-item label="商城类目" prop="category_id" help="用于小程序端筛选商城">
              <a-select v-model="category_index" @change="onCategoryChange">
                <a-select-option v-for="(item, index) of categoryInfo" :key="index" :value="index">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <template v-if="categoryInfo[category_index] && fix">
              <a-form-model-item
                v-for="(item, index) of categoryInfo[category_index].option"
                :key="index"
                :label="item.name"
              >
                <a-select @change="(e) => handleChange(e, item.name)" mode="multiple">
                  <a-select-option v-for="(item_value, i) of item.list" :key="i" :value="item_value">
                    {{ item_value }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </template>
            <a-form-model-item label="营业状态" prop="open_status">
              <a-radio-group v-model="info.open_status">
                <a-radio :value="1">营业</a-radio>
                <a-radio :value="0">打烊</a-radio>
              </a-radio-group>
              <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 5px; font-size: 14px">打烊的门店用户无法下单</p>
            </a-form-model-item>
            <a-form-model-item label="营业时间">
              <a-radio-group v-model="info.shop_time_type">
                <a-radio :value="0">全天</a-radio>
                <a-radio :value="1">自定义</a-radio>
              </a-radio-group>
              <div class="time_arr" v-if="info.shop_time_type == 1">
                <a-time-picker v-model="info.start_time" format="HH:mm" valueFormat="HH:mm" />
                <span> 至 {{ timeName }} </span>
                <a-time-picker v-model="info.end_time" format="HH:mm" valueFormat="HH:mm" />
              </div>
            </a-form-model-item>
            <a-form-model-item label="是否可下单">
              <a-radio-group v-model="info.is_time_forbid">
                <a-radio :value="0">非营业时间禁止下单</a-radio>
                <a-radio :value="1">非营业时间可以下单</a-radio>
              </a-radio-group>
            </a-form-model-item>
            <a-form-model-item label="配送范围">
              <a-radio
                :checked="info.is_set_distance == 0 ? false : true"
                @click="info.is_set_distance = info.is_set_distance == 0 ? 1 : 0"
                >配送范围</a-radio
              >
              <a-input
                addon-after="km"
                v-model="info.distance"
                style="width: 200px; display: block"
                v-if="info.is_set_distance == 1"
              />
              <p style="color: rgba(0, 0, 0, 0.45); margin-bottom: 5px; font-size: 14px">
                同城配送订单，超过配送范围不能选择同城配送
              </p>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 12, offset: 6 }">
              <a-button :loading="btnLoading" type="primary" @click="submitForm"> 保存 </a-button>
            </a-form-model-item>
          </a-form-model>
          <SelectMap v-if="mapVisiable" :value.sync="mapVisiable" @onOk="selectMapOk"></SelectMap>
        </div>
      </template>
    </page-tab-list>
  </page-header-wrapper>
</template>

<script>
import storage from 'store'
import { Address } from '@/components'
import { getStoreParams, setStoreParams, getCategoryInfo } from '@/api/store'
import SelectMap from '@/components/SelectMap/SelectMap'
import { cyyUploadImg } from '@/components/CyyUi'

export default {
  name: 'SettingOther',
  data() {
    return {
      loading: false,
      btnLoading: false,
      mapVisiable: false,
      info: {
        name: '',
        logo: '',
        coordinate: '',
        address: '',
        category_id: 0,
        option: [],
        address_info: {
          province_id: 0,
          city_id: 0,
          district_id: 0,
        },
        sales: 0,
        rank: 5,
        per_spend: 0,
        tags: [],
        contact_tel: '',
        user_name: '',
        open_status: 1,
        // 营业状态类型 0 全天  1时间段
        shop_time_type: 0,
        // 营业开始时间
        start_time: '',
        // 营业结束之间时间
        end_time: '',
        // 是否可下单 0非营业时间禁止下单  1可以下单
        is_time_forbid: 1,
        // 配送范围
        distance: '',
        // 是否使用配送范围 0 否 1是
        is_set_distance: 0,
      },
      category_index: '',
      categoryInfo: [],
      category_option: [],
      rules: {
        name: [{ required: true, message: '请输入商城名称', trigger: 'blur' }],
        coordinate: [{ required: true, message: '请输入或选择商城坐标', trigger: 'blur' }],
        address: [{ required: true, message: '请输入商城地址', trigger: 'blur' }],
        user_name: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        contact_tel: [{ required: true, message: '请输入联系方式', trigger: 'blur' }],
        logo: [{ required: true, message: '请选择商城Logo', trigger: 'blur' }],
      },
      fix: true,
    }
  },
  components: {
    SelectMap,
    Address,
    cyyUploadImg,
  },
  created() {
    this.getData()
    this.getCategoryInfo()
  },
  props: {
    storeId: {
      type: Number,
      default: 0,
    },
    isSuperAdmin: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    timeName() {
      if (this.info.start_time && this.info.start_time != '' && this.info.end_time && this.info.end_time != '') {
        const date = this.$moment().format('YYYY-MM-DD')
        const start = new Date(date + ' ' + this.info.start_time).getTime()
        const end = new Date(date + ' ' + this.info.end_time).getTime()
        if (start < end) {
          return '今日'
        }
        return '明日'
      }
      return ''
    },
  },
  methods: {
    getCategoryInfo: function () {
      getCategoryInfo({}).then((res) => {
        if (res.code == 0) {
          this.categoryInfo = res.data
        }
      })
    },
    getData: function () {
      this.storeId = storage.get('storeId')
      this.loading = true
      getStoreParams({ storeId: this.storeId })
        .then((res) => {
          if (res.code == 0) {
            this.fix = false
            this.$nextTick(() => {
              this.info = res.data
              this.fix = true
                this.isSuperAdmin = res.data.is_super_admin
            })
          }
        })
        .catch((error) => {
          console.log(error)
        })
        .then(() => {
          this.loading = false
        })
    },
    submitForm: function () {
      this.storeId = storage.get('storeId')
      this.$refs.coordinateForm.validate((valid) => {
        if (valid) {
          this.btnLoading = true
          if (this.category_index) {
            this.info.category_id = this.categoryInfo[this.category_index].id
          }
          setStoreParams({
            ...this.info,
            category_option: this.category_option,
            storeId: this.storeId,
          })
            .then((res) => {
              if (res.code == 0) {
                if (this.category_index) {
                  this.info.category_name = this.categoryInfo[this.category_index].name
                }
                this.info.option = this.category_option
                this.$message.success('保存成功！')
              } else {
                this.$message.warning(res.msg ? res.msg : '保存失败！')
              }
            })
            .catch((error) => {
              console.log(error)
            })
            .then(() => {
              this.btnLoading = false
            })
        }
      })
    },
    onClickSelectMap: function () {
      this.mapVisiable = true
    },
    selectMapOk(e) {
      this.info.coordinate = e
    },
    handleChange: function (e, name) {
      for (let i = 0; i < this.category_option.length; i++) {
        if (this.category_option[i].name == name) {
          this.category_option.splice(i, 1)
        }
      }
      this.category_option.push({
        name: name,
        list: e,
      })
    },
    onCategoryChange: function (e) {
      this.category_option = []
      this.fix = false
      this.$nextTick(() => {
        this.fix = true
      })
    },
    autoSortCoordinate: function () {
      this.info.coordinate = this.info.coordinate.replace(/，/, ',')
      if (this.info.coordinate.indexOf(',') !== -1) {
        this.info.coordinate = this.info.coordinate.split(',').sort((v1, v2) => {
          return v1 - v2
        }).toString()
      }
    }
  }
}
</script>

<style scoped>
</style>
